<template>
    <div class="searchlist">
        <div class="search-hearder">
            <div class="search-con">
                <i class="back" @click="$router.back()"></i>
                <div class="search">
                    <i></i>
                    <input type="text" @keyup.enter="getSearch" v-model="searchvalue" placeholder="请输入要搜索的内容" />
                </div>
                <button @click="getSearch">搜索</button>
            </div>
        </div>
        <div class="section-box">
            <van-tabs color="#000" line-width="60px" v-model:active="active" @click-tab="goNewshopp">
                <van-tab title="默认" name="default">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in searchlist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <!-- <img :src="`https://images.weserv.nl/?url=${item.goods_img}`" alt="" /> -->
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥{{ item.goods_price }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="新品" name="goods_xp">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in xplist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="人气" name="goods_rq">
                    <div class="navs-list">
                        <ul>
                            <li v-for="item in rqlist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab title="价格" name="goods_price">
                    <div class="navs-list" :class="isShow ? 'active' : 'active2'">
                        <ul>
                            <li v-for="item in pricelist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                                <div class="shopping-box">
                                    <div class="img_box">
                                        <img :src="item.goods_img" alt="" />
                                    </div>
                                    <p class="shopping-title">{{ item.goods_name }}</p>
                                    <div class="shopping-price">
                                        <span class="discount">￥{{ item.goods_price }}</span>
                                        <span class="original">￥3009</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getSearchList } from "../../api/index";
import { ref, reactive, toRaw } from "vue";
import { useStore } from "../../store/index";
import { useUserInfo } from "../../store/user";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

let router = useRouter();
let route = useRoute();

const $store = useStore();
const store = useUserInfo();

let flag = ref(false);
const searchvalue: any = ref("");
const activeName = ref("default");
const active = ref(0);
let searchlist = reactive({
    list: [],
});
let xplist = reactive({
    list: [],
});
let rqlist = reactive({
    list: [],
});
let pricelist = reactive({
    list: [],
});

let isShow = ref(false);

//初始化
const init = () => {
    searchvalue.value = $store.$state.searchVal;
    let data = {
        search: $store.$state.searchVal,
    };
    getSearchList(data).then((res: any) => {
        searchlist.list = res.content;
    });
};

//去搜索
const getSearch = () => {
    // $store.getSearchVal(searchvalue.value);
    // console.log($store.$state.searchVal);

    if (searchvalue.value.length > 0) {
        let data = {
            search: searchvalue.value,
        };
        getSearchList(data).then((res: any) => {
            searchlist.list = res.content;
            console.log(searchlist.list);
        });
        let historys = localStorage.history;
        // console.log("1.0", historys);
        if (historys == undefined) {
            let historyArr = [searchvalue.value];
            // console.log("2.0", historyArr);

            let historyStr = historyArr.toString();
            // console.log("3.0", historyStr);

            localStorage.history = historyStr;
        } else {
            let historyArr = historys.split(",");
            // console.log("4.0", historyArr);
            flag.value = false;
            for (let i = 0; i <= historyArr.length - 1; i++) {
                if (historyArr[i] == searchvalue.value) {
                    flag.value = true;
                    break;
                }
            }
            if (!flag.value) {
                historyArr[historyArr.length] = searchvalue.value;
                let historyStr = historyArr.toString();
                localStorage.history = historyStr;
            }
        }
    } else {
        showToast("请输入搜索内容");
    }
};

//去商品详情
const goShoppingDetail = (gid: number) => {
    let look = localStorage.getItem("user_look");
    if (look === null) {
        let lookArr = gid;
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    } else {
        let lookArr = JSON.parse(localStorage.getItem("user_look")).split(",");
        // console.log("1.0", lookArr);
        lookArr.push(gid.toString());
        let Myset = new Set(lookArr);
        // console.log("2.0", Myset);
        lookArr = Array.from(Myset);
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    }
    router.push({
        name: "detail",
        query: {
            gid,
        },
    });
};

const goNewshopp = ({ name }) => {
    if (name == "default") {
        // console.log(111);
        isShow.value = false;
    }
    if (name == "goods_xp") {
        isShow.value = false;
        xplist.list = toRaw(searchlist.list).filter((item) => {
            if (item.goods_xp == 1) {
                return item;
            }
        });
    }
    if (name == "goods_rq") {
        isShow.value = false;
        let list = toRaw(searchlist.list).filter((item) => {
            if (item.goods_rq == 1) {
                return item;
            }
        });
        rqlist.list = list.reverse();
    }
    if (name == "goods_price") {
        isShow.value = !isShow.value;
        console.log(isShow.value);
        let list: any = toRaw(searchlist.list);
        let arr = [];
        for (let key in list) {
            if (typeof list[key] == "object") {
                arr[key] = list[key];
            } else {
                arr[key] = list[key];
            }
        }
        if (isShow.value) {
            arr.sort((a: any | any[], b: any | any[]) => {
                let a_price = parseInt(a.goods_price);
                let b_price = parseInt(b.goods_price);
                return a_price - b_price;
            });
        }
        if (!isShow.value) {
            arr.sort((a: any | any[], b: any | any[]) => {
                let a_price = parseInt(a.goods_price);
                let b_price = parseInt(b.goods_price);
                return b_price - a_price;
            });
        }

        pricelist.list = arr;
    }
};

init();
</script>

<style lang="scss" scoped>
.searchlist {
    // height: 1000px;
    width: 100%;
    // background: #f0f0f0;
}
.search-hearder {
    z-index: 2;
    background: #353535;
    display: flex;
    align-items: center;
    position: relative;
    .search-con {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 7px 15px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #999;
        background: #353535;

        .back {
            margin-left: 5px;
            display: block;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            border: 2px solid #fff;
            border-right-color: transparent;
            border-top-color: transparent;
        }

        .search {
            flex: 1;
            margin: 0 10px;
            position: relative;
            display: flex;
            i {
                position: absolute;
                top: 5px;
                left: 10px;
                display: block;
                width: 15px;
                height: 15px;
                background-image: url(@/assets/sousuo.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }

            input {
                width: 100%;
                border-radius: 20px;
                padding: 5px 33px;
                font-size: 14px;
                outline: 0;
                border: 0;
                background: #f0f0f0;
            }
        }

        button {
            padding: 0;
            width: 10%;
            border: 0;
            background: #353535;
            font-size: 14px;
            color: #fff;
            text-align: right;
        }
    }
}
.section-box {
    // padding: 20px 10px 0;
    padding: 42px 0 0;

    :deep(.van-tabs__line) {
        border-radius: 0;
    }
    :deep(.van-tabs--line .van-tabs__wrap) {
        width: 100%;
        position: fixed;
        top: 42px;
        left: 0;
    }

    .navs-list {
        width: 100%;
        padding: 50px 10px 0;
        // height: 300px;
        // border: 1px solid #000;
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        li {
            background: #fff;
            width: 48%;
            // height: 300px;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .shopping-box {
            .img_box {
                width: 100%;
                height: 200px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .shopping-title {
            margin: 15px 0 5px;
            height: 34px;
            line-height: 17px;
            font-size: 13px;
            color: #313131;
            overflow: hidden;
            // text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .shopping-price {
            font-size: 13px;
            color: #c7273a;
            span {
                padding-right: 10px;
            }
        }
        .original {
            text-decoration: line-through;
            color: #999;
        }
    }
}
:deep(.van-tab__text--ellipsis) {
    position: relative;
}

:deep(.van-tabs-1-3) {
    position: relative;
}
.navs-list {
    &:before {
        content: "";
        position: absolute;
        top: 17px;
        right: 22px;
        display: block;
        width: 5px;
        height: 5px;
        border: 1px solid #999;
        transform: rotate(45deg);
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    &:after {
        content: "";
        position: absolute;
        top: 22px;
        right: 22px;
        display: block;
        width: 5px;
        height: 5px;
        border: 1px solid #999;
        transform: rotate(45deg);
        border-left-color: transparent;
        border-top-color: transparent;
    }
}
.active {
    &:before {
        content: "";
        position: absolute;
        top: 17px;
        right: 22px;
        display: block;
        width: 5px;
        height: 5px;
        border: 1px solid #000;
        transform: rotate(45deg);
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
}
.active2 {
    &:after {
        content: "";
        position: absolute;
        top: 22px;
        right: 22px;
        display: block;
        width: 5px;
        height: 5px;
        border: 1px solid #000;
        transform: rotate(45deg);
        border-left-color: transparent;
        border-top-color: transparent;
    }
}
</style>
